<template>
  <template v-if="routes">
    <template v-for="r in routes">
      <t-submenu
        v-if="r.children && r.children.length !== 0"
        :key="r.name"
        :index="r.name"
      >
        <template #title>
          <span> {{ r.meta?.title }}</span>
        </template>
        <TreeMenuItem :routes="r.children || []"></TreeMenuItem>
      </t-submenu>
      <template v-else>
        <t-menu-item :key="r.name" :index="r.name" @click="goto(r)">
          <span> {{ r.meta?.title }}</span>
        </t-menu-item>
      </template>
    </template>
  </template>
</template>

<script lang="ts">
import type { RouteRecordRaw } from 'vue-router';
export default {
  name: 'TreeMenuItem',
};

export interface TreeMenuItemProps {
  routes: RouteRecordRaw[];
}
</script>

<script setup lang="ts">
defineProps<TreeMenuItemProps>();

function goto(item: RouteRecordRaw) {
  // Open external link
  // if (regexUrl.test(item.path)) {
  //   openWindow(item.path);
  //   // selectedKey.value = [item.name as string]
  //   // emits('selectedKeyChange', selectedKey.value)
  //   return;
  // }
  // // Eliminate external link side effects
  // const { hideInMenu, activeMenu } = item.meta as RouteMeta;
  // if (routeInstance.name === item.name && !hideInMenu && !activeMenu) {
  //   // selectedKey.value = [item.name as string]
  //   // emits('selectedKeyChange', selectedKey.value)
  //   return;
  // }
  // // Trigger router change
  // router.push({
  //   name: item.name,
  // });
}
</script>

<style scoped></style>
